<template>
	<view class="die">
		<text class="wo">我的</text>
		<view class="user-info">
			<image :src="user.userpic" class="tou"></image>
			<view class="user-details">
				<text class="wei">{{user.name}}</text>
				<text class="shou">{{user.phone }}</text>
			</view>
			<view class="ren">
				<text class="zhong">认证中心<image class="jian" src="/static/jian.png" style="height:30rpx; width: 30rpx; ">
					</image></text>
			</view>
		</view>
		<!-- <view class="qu">
			<image class="la" src="/static/la.png" style="height:50rpx; width: 50rpx; "></image>
			<text class="qian">立即认证,开启你的赚钱之旅吧!</text>
			<view class="qr">
				<text class="re">去认证</text>
			</view>
		</view> -->
	</view>
	<view class="shou3">
		<view class="shou1">
			<image class="la1" src="/static/qian.png" style="height:50rpx; width: 50rpx; "></image>
			<text class="ru" @click="shouru()">我的收入</text>
		</view>
		<view class="shou2">
			<image class="la1" src="/static/che.png" style="height:50rpx; width: 50rpx; "></image>
			<text class="che" @click="cl">我的车辆</text>
		</view>
	</view>
	<view>
		<view class="fuwu">
			<text class="fu">服务中心</text>
		</view>
		<view class="zx">
			<view class="box">
				<image class="la" src="/static/dianhua.png" style="height:70rpx; width: 70rpx; "></image>
				<text class="zi">客服中心</text>
			</view>
			<view class="box">
				<image class="la" src="/static/he.png" style="height:70rpx; width: 70rpx; "></image>
				<text class="zi">我的合同</text>
			</view>
			<view class="box" @click="y">
				<image class="la" src="/static/dan.png" style="height:70rpx; width: 70rpx; "></image>
				<text class="zi">我的运单</text>
			</view>
			<view class="box">
				<image class="la" src="/static/ji.png" style="height:70rpx; width: 70rpx; "></image>
				<text class="zi">水印相机</text>
			</view>
			<view class="box">
				<image class="la" src="/static/sao.png" style="height:70rpx; width: 70rpx; "></image>
				<text class="zi1">扫一扫</text>
			</view>
			<view class="box" @click="logout">
				<image class="la" src="/static/loginout.png" style="height:70rpx; width: 70rpx; "></image>
				<text class="zi1">退出登录</text>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		userStore
	} from '@/stores/user';

	import {
		shopStore
	} from '@/stores/shop.js'
	//引入存放jwt的容器
	import {
		tokenStore
	} from '@/stores/token';
	//引入容器
	const token = tokenStore()
	const u = userStore()
	const s = shopStore()
	//获取jwt
	console.log('Token:', token.token);
	console.log('User:', u.user);
	//引入拦截器
	import '@/config/requst.js'
	const user = ref({})
	user.value = u.user

	const cl = () => {
		uni.navigateTo({
			url: '/pages/che/che'
		})
	}
	const y = () => {
		uni.navigateTo({
			url: '/pages/yundan/yundan'
		})
	}
	const shouru = () => {
		uni.navigateTo({
			url: '/pages/my/my'
		})
	}

	const logout = () => {
		s.removeShop();
		token.removeToken();
		u.removeUser();
		uni.reLaunch({
			url: '/pages/login/login'
		});
	};
</script>

<style>
	.la1 {
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.zi1 {
		margin-left: 15rpx;
	}

	.zi {
		display: flex;
	}

	.zx {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 20rpx;
	}

	.box {
		display: flex;
		flex-direction: column;
		width: 150rpx;
		height: 150rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
	}

	.fu {
		margin-left: 50rpx;
		font-size: 20px;
	}

	.fuwu {
		margin-top: 30rpx;
		height: 80rpx;
		border-bottom: 1px solid #C0C0C0;
	}

	.ru {
		color: #000000;
		margin-left: 30rpx;
		font-size: 17px;
		margin-top: 20rpx;
	}

	.che {
		color: #000000;
		margin-left: 30rpx;
		font-size: 17px;
		margin-top: 20rpx;
	}

	.shou {
		display: flex;
		justify-content: space-between;
	}

	.shou3 {
		display: flex;
		justify-content: space-between;
		background-color: #f0f0f0;
		/* 设置容器背景颜色以便观察效果 */
		height: 160rpx;
	}

	.shou1 {
		display: flex;
		background-color: #FFFFFF;
		margin-left: 40rpx;
		margin-top: 20rpx;
		width: 320rpx;
		height: 120rpx;
	}

	.shou2 {
		display: flex;
		margin-right: 40rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		width: 320rpx;
		height: 120rpx;
	}

	.re {
		margin-left: 10rpx;
		font-size: 14px;
		/* 设置文字大小 */
		color: #ff0004;
	}

	.qr {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		margin-left: 30rpx;
		background-color: #e1e1e0;
		width: 100rpx;
		height: 50rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		/* 圆角边框 */
	}

	.qian {
		margin-left: 20rpx;
		color: #548aff;
	}

	.la {
		margin-left: 30rpx;
	}

	.qu {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		margin-top: 20rpx;
		margin-left: 30rpx;
		width: 685rpx;
		height: 90rpx;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		/* 圆角边框 */
		opacity: 0.85;
		/* 透明度，0 为完全透明，1 为完全不透明 */

	}

	.jian {
		margin-bottom: -5rpx;
	}

	.zhong {
		margin-left: 15rpx;
		color: #0055ff;
		font-size: 15px;
		/* 设置文字大小 */
	}

	.ren {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		width: 170rpx;
		/* 圆形的直径 */
		height: 70rpx;
		/* 圆形的直径 */
		background-color: #ffffff;
		/* 背景颜色 */
		opacity: 0.85;
		/* 透明度，0 为完全透明，1 为完全不透明 */
		border-radius: 50rpx 0 0 50rpx;
		/* 圆角边框 */
		margin-left: 212rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		gap: 10px;
		/* 设置图片和文字之间的间距 */
	}

	.user-details {
		display: flex;
		flex-direction: column;
		/* 文字上下排列 */
		gap: 10px;
		/* 设置文字之间的间距 */
	}

	.wei,
	.shou {
		color: #ffffff;
		font-size: 14px;
		/* 设置文字大小 */
	}

	.tou {
		width: 130rpx;
		height: 120rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
	}

	.die {
		height: 400rpx;
		background-color: #00007f;
	}

	.wo {
		font-size: 40rpx;
		color: #FFFFFF;
		margin-left: 30rpx;
	}
</style>